<template>
    <div class="project-edit contain-edit">
        <div class="header">
           <p>项目管理>>添加</p>
        </div>
       <div class="main">
           <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
               <el-form-item label="产品图片：" prop="imageFileKeys">
                    <el-upload  list-type="picture-card"  
                        :http-request="myUpload"
                        :action="upLoadUrl"
                        :class="{uploadShow:uploadState}"
                        :file-list='fileShowList'
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload" multiple>  
                        <i class="el-icon-plus"></i> 
                    </el-upload> 
                </el-form-item>
                <el-form-item label="重点项目" prop="isImportant">
                    <el-radio v-model="information.isImportant" label="y">是</el-radio>
                    <el-radio v-model="information.isImportant" label="n">否</el-radio>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="information.projectName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="项目等级" prop="levelCode">
                    <el-select filterable v-model='information.levelCode'  placeholder='-请选择-'>
                        <el-option   v-for="item in levelArr"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目阶段" prop="phaseCode">
                    <el-select filterable v-model='information.phaseCode'  placeholder='-请选择-'>
                        <el-option   v-for="item in phaseArr"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目类型" prop="typeCode">
                    <el-select filterable v-model='information.typeCode'  placeholder='-请选择-'>
                        <el-option   v-for="item in typeArr"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目组别">
                    <div class="group-form">
                        <div class="group-head">
                            <div class="head box">
                                <div class="head-list">成员姓名</div>
                                <div class="head-list">工牌</div>
                                <div class="head-list">组别</div>
                                <div class="head-list">等级</div>
                                <div class="head-list">角色</div>
                                <div class="head-list">负责部件</div>
                                <div class="head-list">部件状态</div>
                                <div class="head-list">所用工具</div>
                                <div class="head-list">目标分值</div>
                            </div>
                            <div @click="add" class="btn-add">添加行</div>
                        </div>
                        <!-- <div class="group-wrap box">
                            <div class="group-type"> 
                                <el-select  @change="groupChange"  filterable v-model='information.groupId'  placeholder='-请选择-'>
                                    <el-option v-for="item in groupArr"   :key="item.id"   :label="item.groupName"  :value="item.id"></el-option>
                                </el-select>
                            </div>
                            <div style="width:100%">
                                <div v-for="(item,index) in information.staffParamList" :key="index" class="group-item box">
                                    <div class="group-list">
                                        {{item.workCard}}
                                    </div>
                                    <div class="group-list">
                                        <el-input :disabled="true" v-model="item.userName" placeholder="请输入"></el-input>
                                    </div>
                                    <div class="group-list">
                                        <el-input :disabled="true" v-model="item.levelName" placeholder="请输入"></el-input>
                                    </div>
                                    <div class="group-list">
                                        <el-select filterable v-model='item.roleCode'  placeholder='-请选择-'>
                                            <el-option   v-for="item in dictArr.role"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                        </el-select>
                                    </div>
                                    <div class="group-list">
                                        <el-select filterable v-model='item.partsCode'  placeholder='-请选择-'>
                                            <el-option   v-for="item in dictArr.parts"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                        </el-select>
                                    </div>
                                    <div class="group-list">
                                        <el-select filterable v-model='item.partsStatusCode'  placeholder='-请选择-'>
                                            <el-option   v-for="item in dictArr.partsStatus"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                        </el-select>
                                    </div>
                                    <div class="group-list">
                                        <el-select filterable v-model='item.toolCode'  placeholder='-请选择-'>
                                            <el-option   v-for="item in dictArr.tools"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                        </el-select>
                                    </div>
                                    <div @click="deleteBtn(index)" class="btn-add">删除</div>
                                </div>
                                <div v-if="!information.staffParamList.length" class="no-list">数据为空</div>
                            </div>
                        </div> -->
                        <div v-for="(item,index) in addListArr" :key="index" class="add-item box">
                            <div class="add-list">
                                <el-input @change="workCardChange(item.staffName,index)" v-model="item.staffName" placeholder="请输入"></el-input>
                                <div class="error" v-if="item.isError">工牌信息不正确</div>
                                <div class="name-select" v-if="nameArr.length&&item.state">
                                    <div @click="nameSelect(list.id)" v-for="(list,index) in nameArr" :key="index" class="name-list">{{list.staffName}} ({{list.groupName}})</div>
                                </div>
                            </div>
                            <div class="add-list"> 
                                {{item.workCard}}
                            </div>
                            <div class="add-list">
                                {{item.groupName}}
                            </div>  
                            <div class="add-list">
                                {{item.levelName}}
                            </div>  
                            <div class="add-list">
                                <el-select filterable v-model='item.roleCode'  placeholder='-请选择-'>
                                    <el-option   v-for="item in dictArr.role"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                </el-select>
                            </div>
                            <div class="add-list">
                                <el-select filterable allow-create v-model='item.partsName'  placeholder='-请选择-'>
                                    <el-option   v-for="item in dictArr.parts"   :key="item.key"   :label="item.value"  :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="add-list">
                                <el-select filterable v-model='item.partsStatusCode'  placeholder='-请选择-'>
                                    <el-option   v-for="item in dictArr.partsStatus"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                </el-select>
                            </div>
                            <div class="add-list">
                                <el-select filterable v-model='item.toolCode'  placeholder='-请选择-'>
                                    <el-option   v-for="item in dictArr.tools"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                                </el-select>
                            </div>
                            <div class="add-list">
                                <el-input v-model="item.targetScore" placeholder="请输入"></el-input>
                            </div>
                            <div @click="deleteBtn1(index)" class="btn-add">删除</div>
                        </div>
                        <div v-if="!addListArr.length" class="no-list">数据为空</div>
                    </div>
                </el-form-item>
                <el-form-item label="荣誉徽章" prop="infoTitle">
                    <div>
                         效率：
                         <el-radio-group v-model="information.efficiencyCode">
                            <el-radio-button v-for="(item,index) in dictArr.badge" :key="item.key" v-if="index<3" :label="item.key">{{item.value}}</el-radio-button>
                        </el-radio-group>
                    </div>      
                </el-form-item>
                <el-form-item label="项目分值" prop="totalScore">
                    <el-input v-model="information.totalScore" placeholder="请输入项目分值"></el-input>
                </el-form-item>
                <el-form-item label="开发时间" prop="infoTitle">
                    <div class="date-wrap">
                        <div v-for="(item,index) in information.timeParamList" :key="index" class="date-item box">
                            <div class="date-list box box-pack-center box-align-center">
                                 <el-input v-model="item.title" placeholder="请输入"></el-input>
                            </div>
                            <div class="date-list box box-pack-center box-align-center">
                                <el-date-picker
                                    v-model="item.startTime"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                    </el-date-picker>
                            </div>
                        </div>
                    </div>
                </el-form-item> 
                <el-form-item label="项目计划详情" prop="planFileKey">
                    <el-upload  
                        class="file-load"
                        :http-request="myUpload"
                        :action="upLoadUrl"
                        :limit="1"
                        :file-list='fileShowList1'
                        :on-remove="handleRemove1"
                        :before-upload="beforeAvatarUpload1">  
                         <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">注：文档格式为word或excel或pdf</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="最新需求变更日期" prop="changeDate">
                    <el-date-picker
                    v-model="information.changeDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="最新需求变更内容" prop="changeContent">
                    <el-input
                    type="textarea"
                    :rows="2"
                    style="width:60%;"
                    placeholder="请输入内容"
                    v-model="information.changeContent">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                    type="textarea"
                    :rows="2"
                    style="width:60%;"
                    placeholder="请输入内容"
                    v-model="information.remark">
                    </el-input>
                </el-form-item>
                <el-form-item label="订单信息" prop="orderInfo">
                    <el-input
                    type="textarea"
                    :rows="2"
                    style="width:60%;"
                    placeholder="请输入内容"
                    v-model="information.orderInfo">
                    </el-input>
                </el-form-item>
                <el-form-item label="本项目任务汇总" prop="infoTitle">
                   <div class="total-wrap">
                       <div class="total-item box">
                           <div class="total-list">总任务</div>
                           <div class="total-list">超速完成</div>
                           <div class="total-list">正常完成</div>
                           <div class="total-list">延期完成</div>
                           <div class="total-list">异常</div>
                           <div class="total-list">未完成</div>
                       </div>
                       <div class="total-item  box">
                           <div class="total-list">
                               <el-input v-model="information.totalTask" placeholder="请输入"></el-input>
                           </div>
                           <div class="total-list">
                               <el-input v-model="information.overSpeedTask" placeholder="请输入"></el-input>
                           </div>
                           <div class="total-list">
                               <el-input v-model="information.normalTask" placeholder="请输入"></el-input>
                           </div>
                           <div class="total-list">
                               <el-input v-model="information.delayTask" placeholder="请输入"></el-input>
                           </div>
                           <div class="total-list">
                               <el-input v-model="information.abnormalTask" placeholder="请输入"></el-input>
                           </div>
                           <div class="total-list">
                               <el-input v-model="information.unfinishedTask" placeholder="请输入"></el-input>
                           </div>
                       </div>
                   </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')"  :loading="loading">保存</el-button>
                    <el-button @click="back()">返回</el-button>
                </el-form-item>
           </el-form>
       </div>

    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import $ from 'jquery'
import $axios from 'axios'
  export default {
    data() {
        return {
            id:null,
            pageCount:null,
            pageIndex:1,
            pageSize:10,
            upLoadUrl:"",
            imageUrl:null,
            information:{
                id:null,
                imageFileKeys :[],
                isImportant:'n',
                projectName:null,
                levelCode:null,
                phaseCode:null,
                typeCode:null,
                groupId:null,
                staffParamList:[{
                    id:null,
                    partsName:null,
                    partsStatusCode:null,
                    roleCode:null,
                    toolCode:null,
                    userId:null,
                    workCard:null,
                    targetScore:null
                }],
                efficiencyCode:'',
                qualityCode:null,
                totalScore:'',
                timeParamList:[
                   {
                    endTime:'',
                    projectId:'',
                    startTime:'',
                    title:''
                   },
                   {
                    endTime:'',
                    projectId:'',
                    startTime:'',
                    title:''
                   },
                   {
                    endTime:'',
                    projectId:'',
                    startTime:'',
                    title:''
                   },
                   {
                    endTime:'',
                    projectId:'',
                    startTime:'',
                    title:''
                   }
                ],
                planFileKey:null,
                planFileName:null,
                changeDate:null,
                changeContent:null,
                remark:null,
                orderInfo:null,
                totalTask:null,
                overSpeedTask:null,
                normalTask:null,
                delayTask:null,
                abnormalTask:null,
                unfinishedTask:null
            },
            fileShowList:[],
            fileShowList1:[],
            uploadState:false,
            rules: {
                imageFileKeys: [
                    { required: true, message: '请上传产品图片', trigger: 'blur' }
                ],
                projectName:[
                    { required: true, message: '请输入项目名称', trigger: 'blur' }
                ],
                levelCode:[
                    { required: true, message: '请选择项目等级', trigger: 'blur' }
                ],
                phaseCode:[
                    { required: true, message: '请选择项目阶段', trigger: 'blur' }
                ],
                typeCode:[
                    { required: true, message: '请选择项目类型', trigger: 'blur' }
                ],
                groupId:[
                    { required: true, message: '请选择项目组别', trigger: 'blur' }
                ],
            },
            loading: false,
            levelArr:[],
            phaseArr:[],
            typeArr:[],
            dictArr:[],
            groupArr:[],
            staffName:'',
            addListArr:[],
            nameArr:[],
            numIndex:0
        };
    },
    components:{
         'bg-editor':()=>import('../common/bg-editor.vue')
    },
    watch:{
    },
    mounted() {
        this.id  = this.$router.currentRoute.query.id;
        if(this.id){
            this.getDetail(); 
        }
        this.getDictArr()  
        // this.getGroup()
    },
    methods: {
        workCardChange(e,num){
            this.searchStaff(num,e)
        },
        nameSelect(id){
            this.nameArr.map((list)=>{
                if(list.id == id){
                    let obj = this.addListArr[this.numIndex]
                        obj.staffName = list.staffName
                        obj.state =false
                        obj.groupName =list.groupName
                        obj.workCard =list.workCard
                        obj.levelName =list.levelName
                        obj.userId  = list.id
                        obj.partsName = '';
                        obj.isError = false;
                        obj.partsStatusCode = '';
                        obj.roleCode = '';
                        obj.toolCode = '';
                        obj.targetScore= list.targetScore
               }
            })
            this.nameArr = []
        },
        add(){
            let state = false;
            if(this.addListArr.length){
                this.addListArr.forEach((item)=>{
                    if(!item.staffName){
                        item.isError = true;
                        state = true;
                    }
                })
            }
            if(state)return;

            this.addListArr.push(
                {
                    id:null,
                    partsName:null,
                    partsStatusCode:null,
                    roleCode:null,
                    toolCode:null,
                    userId:null,
                    workCard:null,
                    isError : false,
                    staffName:null,
                    state:false,
                    targetScore:null
                }
            ) 
        },
        groupChange(){
            let url = CONSTANT.URL.STAFF.FINDSTAFFBYALL;
            let data = {
                groupId:this.information.groupId,
                pageIndex:1,
                pageSize:100000,
                workCard:this.workCard
            } ;
            common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                let arr = res.data.bussData;
                let arr1 = []
                if(arr.length){
                    arr.map((item)=>{
                        arr1.push({
                            id:null,
                            partsName:null,
                            partsStatusCode:null,
                            roleCode:null,
                            toolCode:null,
                            userId:item.id,
                            levelName:item.levelName,
                            userName:item.staffName,
                            workCard:item.workCard,
                            targetScore:null
                        })
                    })
                }else{
                    arr1.push({
                        id:null,
                        partsName:null,
                        partsStatusCode:null,
                        roleCode:null,
                        toolCode:null,
                        userId:null,
                        workCard:item.workCard
                    })
                }
                this.information.staffParamList =  arr1
            }) 
        },
        searchStaff(num,e){
            let url = CONSTANT.URL.STAFF.FINDINFOBYNAME;
            let data = {
                pageIndex:1,
                pageSize:100000,
                staffName:e
            } ;
            common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                console.log(!res.data)
                 if(res.data&&!res.data.bussData){
                     this.addListArr.forEach((item,index)=>{
                         if(index == num){
                             item.isError = true
                         }
                    })
                     return;
                 }  
                 this.nameArr = res.data.bussData;
                 this.numIndex = num;
                 this.addListArr[this.numIndex].state = true
            }) 
        },
        getDictArr(){
            let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY;
           let data = {
               id:this.id
           } ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
              this.levelArr = res.data.bussData.level
              this.phaseArr = res.data.bussData.phase
              this.typeArr = res.data.bussData.projectType
              this.dictArr = res.data.bussData;
           }) 
            
        },
        getGroup(){
            let url = CONSTANT.URL.GROUP.FINDGROUPBYALL;
           let data = {} ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
              this.groupArr = res.data.bussData
           }) 
            
        },
        myUpload(content) {
          // 重写覆盖上传方法
        },
        getDetail(){
           let url = CONSTANT.URL.PROJECT.FINDPROJECTBYID;
           let data = {
               id:this.id
           } ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
               let info = res.data.bussData 
               let imageArr = []
               info.imageUrls.map((item)=>{
                   this.fileShowList.push({
                        url:item.url
                    })
                    imageArr.push(item.fileKey)
               })
              
               if(this.fileShowList.length>1){
                    this.uploadState = true;
                }
                info.staffDTOList.forEach((item)=>{
                    item.partsName = item.partsName
                    item.partsStatusCode = JSON.stringify(item.partsStatusCode)
                    item.roleCode = JSON.stringify(item.roleCode)
                    item.toolCode = JSON.stringify(item.toolCode)
                    item.userName = item.staffName
                })
                
                info.projectTimes.forEach((item)=>{
                    if(item.startTime){
                        if(item.startTime == '1970-01-01 00:00:00'){
                            item.startTime = '';
                            item.endTime = '';
                        }else{
                            item.startTime = [item.startTime.split(' ')[0],item.endTime.split(' ')[0]]
                        }
                        
                    }
                })
                if(info.planUrl&&info.planUrl.fileKey){
                    this.fileShowList1.push({
                        name:info.planFileName,
                        url:info.planUrl.url
                    })
                }
                this.addListArr = info.staffDTOList
                this.addListArr.forEach((item)=>{
                    item.isError = false
                })
                console.log(this.addListArr,'eeeee')
                this.information = { 
                    id:info.id,
                    imageFileKeys :imageArr,
                    isImportant:info.isImportant,
                    projectName:info.projectName,
                    levelCode:JSON.stringify(info.levelCode),
                    phaseCode:JSON.stringify(info.phaseCode),
                    typeCode:JSON.stringify(info.typeCode),
                    groupId:info.groupId,
                    staffParamList:info.staffDTOList,
                    efficiencyCode:info.efficiencyCode,
                    qualityCode:info.qualityCode,
                    totalScore:info.totalScore,
                    timeParamList:info.projectTimes,
                    planFileKey:info.planUrl?info.planUrl.fileKey:null,
                    planFileName:info.planFileName,
                    changeDate:info.changeDate,
                    changeContent:info.changeContent,
                    remark:info.remark,
                    orderInfo:info.orderInfo,
                    totalTask:info.totalTask,
                    overSpeedTask:info.overSpeedTask,
                    normalTask:info.normalTask,
                    delayTask:info.delayTask,
                    abnormalTask:info.abnormalTask,
                    unfinishedTask:info.unfinishedTask
                }
           }) 
        },
        deleteBtn(num){
            this.information.staffParamList.splice(num,1)
        },
        deleteBtn1(num){
            this.addListArr.splice(num,1)
        },
        handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            let list = this.fileShowList;
                list.forEach((item,index)=>{
                    if(item.url == deleteUrl){
                        list.splice(index,1);
                        this.information.imageFileKeys.splice(index,1);
                    }
                })
                if(list.length<2){
                    this.uploadState = false;
                }
                this.fileShowList = list;
        },   
        beforeAvatarUpload1(file) {
            let url = CONSTANT.URL.SYSTEM.ADMINUPLOADFILE;
            let param = {
                suffix:file.name.split(".")[1],   // 文件后缀  png
                contentType:file.type             // 文件类型  image/png
            }
            common.requestAjax(url,param,null,(res)=> {
                this.upLoadUrl = res.data.bussData.uploadUrl;
                let fileKey = res.data.bussData.fileKey;
                let downloadUrl =   res.data.bussData.downloadUrl;
                common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                    this.fileShowList1.push({
                        name:file.name,
                        url:downloadUrl
                    })
                    this.information.planFileName= file.name
                    this.information.planFileKey= fileKey
                })
            });    
        },
        handleRemove1(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            this.fileShowList1 = [];
            this.information.planFileKey= null
        }, 
        editorInfo(val){
            this.information.infoContent = val;
        },

        submitForm(formName) {
            let state = false;
            if(this.addListArr.length){
                this.addListArr.forEach((item)=>{
                    if(!item.staffName){
                        item.isError = true;
                        state = true;
                    }
                })
            }
            if(state)return;
               let arr = []
               if(this.addListArr&&this.addListArr.length){
                   this.addListArr.map((item)=>{
                        arr.push({
                            id:item.id,
                            partsName:item.partsName,
                            partsStatusCode:item.partsStatusCode,
                            roleCode:item.roleCode,
                            toolCode:item.toolCode,
                            userId:item.userId,
                            targetScore:item.targetScore
                        })
                   })
               }
               this.information.staffParamList = arr;
                this.information.timeParamList.forEach((item)=>{
                    if(item.startTime&&item.startTime.length){
                        item.endTime = item.startTime[1];
                        item.startTime = item.startTime[0];
                    }
                })
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    var url = CONSTANT.URL.PROJECT.SAVE;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.loading = false;
                            this.$router.push("/projectList");
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                            this.loading = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        beforeAvatarUpload(file) {
            let url = CONSTANT.URL.SYSTEM.ADMINUPLOADFILE;
            let param = {
                suffix:file.name.split(".")[1],   // 文件后缀  png
                contentType:file.type             // 文件类型  image/png
            }
            common.requestAjax(url,param,null,(res)=> {
                this.upLoadUrl = res.data.bussData.uploadUrl;
                let fileKey = res.data.bussData.fileKey;
                let downloadUrl =   res.data.bussData.downloadUrl;
                common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                this.fileShowList.push({
                    url:downloadUrl
                })
                this.information.imageFileKeys.push(fileKey)
                 console.log(this.information.imageFileKeys,'imageArr')
                if(this.fileShowList.length>1){
                       this.uploadState = true;
                    }
                })
            });    
        },
        back(){this.$router.push('/projectList');}


    }
  }
</script>

<style lang="scss" >
@import '/static/bootstrap.css';     
@import '/sys/static/bootstrap.css'; 
    .el-form-item__content{
        margin-left: 0;
    }
    .project-edit{
        .el-form-item__label{
            font-size: 13px!important;
        }
        .el-range-separator{
            width: 10%!important;;
        }
        .file-load .el-upload-list__item{
            width:50%!important;
        }
        .name-select{
            position: absolute;
            bottom: -20px;
            width: 110px;
            max-height: 100px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            background-color: #fff;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            -webkit-box-sizing: border-box;
            z-index: 2000;
            .name-list{
                color: #606266;
                height: 34px;
                line-height: 34px;
                box-sizing: border-box;
                font-size: 14px;
                padding: 0 20px;
                position: relative;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                &:hover{
                    background-color: #f5f7fa;
                }
            }
        }
        .group-form{
            width: 90%;
            .btn-add{
                cursor: pointer;
                position: absolute;
                right: -75px;
                top: 5px;
                width: 70px;
                text-align: center;
                height: 30px;
                line-height: 30px;
                border: 1px solid #dedede;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                color: #333;
            }
            .group-head{
                position: relative;
                .head{
                    background-color: #f5f5f5;
                    color: #000;
                    height: 40px;
                    border: 1px solid #dedede;
                    .head-list{
                        flex: 1;
                        -webkit-flex: 1;
                        text-align: center;
                        border-right: 1px solid #dedede;
                        &:first-child{
                            width: 14.8%;
                            flex: inherit;
                            -webkit-flex:inherit;
                        }
                        &:last-child{
                            border-right: 0;
                        }
                    }
                }
            }
            .group-wrap{
                .el-select {
                    width: 100px;
                    .el-input{
                        width: 100px;
                    }
                }
                .el-input{
                    width: 100px;
                }
                .no-list{
                    border: 1px solid #dedede; 
                    width: 100%;
                    text-align: center; 
                }
                .group-type{
                    width: 20%;
                    border: 1px solid #dedede; 
                    border-right: 0px;
                    border-top: 0px;
                    -webkit-box-align: center;
                    -moz-align-items: center;
                    -webkit-align-items: center;
                    align-items: center;
                    display: -webkit-box;
                    display: box;
                    display: -moz-box;
                    /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                    display: -webkit-flex;
                    /* 新版本 - 适配Chrome */
                    display: flex;
                    -webkit-box-justify-content:  center;
                    -moz-align-justify-content:  center;
                    -webkit-align-justify-content: center;
                    justify-content:  center;
                }
                .group-item{
                    .btn-add{
                       top: 15px;
                    }
                    position: relative;
                    width: 100%;
                    border: 1px solid #dedede;
                    border-top: 0px;
                    border-right: 0;
                    height: 60px;
                    .group-list{
                        flex: 1.5;
                        -webkit-flex: 1;
                        border-right: 1px solid #dedede;
                        -webkit-box-align: center;
                        -moz-align-items: center;
                        -webkit-align-items: center;
                        align-items: center;
                        display: -webkit-box;
                        display: box;
                        display: -moz-box;
                        /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                        display: -webkit-flex;
                        /* 新版本 - 适配Chrome */
                        display: flex;
                        -webkit-box-justify-content:  center;
                        -moz-align-justify-content:  center;
                        -webkit-align-justify-content: center;
                        justify-content:  center;
                    }
                }
            }
            .no-list{
                    border: 1px solid #dedede; 
                    width: 100%;
                    text-align: center; 
                }
            .add-item{
                position: relative;
                border-bottom: 1px solid #dedede;
                border-left: 1px solid #dedede;
                .add-list{
                    &:first-child{
                           width: 23.5%;
                    }
                    position: relative;
                    width: 16.9%;
                    border-top: 0px;
                    border-right: 0;
                    height: 80px;
                    border-right: 1px solid #dedede;
                    -webkit-box-align: center;
                    -moz-align-items: center;
                    -webkit-align-items: center;
                    align-items: center;
                    display: -webkit-box;
                    display: box;
                    display: -moz-box;
                    /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                    display: -webkit-flex;
                    /* 新版本 - 适配Chrome */
                    display: flex;
                    -webkit-box-justify-content:  center;
                    -moz-align-justify-content:  center;
                    -webkit-align-justify-content: center;
                    justify-content:  center;
                    .error{
                        position: absolute;
                        bottom:-10px;
                        font-size: 12px;
                        color: #f56c6c;
                    }
                    .el-select {
                    width: 80px;
                        .el-input{
                            width: 80px;
                        }
                    }
                    .el-input{
                        width: 80px;
                    }
                }
                .btn-add{
                    cursor: pointer;
                    position: absolute;
                    right: -75px;
                    top: 25px;
                    width: 70px;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #dedede;
                    border-radius: 5px;
                    -webkit-border-radius: 5px;
                    color: #333;
                }
            }
        }
        .date-wrap{
            width: 80%;
            border: 1px solid #dedede;
            .date-item{
                height: 60px;
                 border-bottom: 1px solid #dedede;
                 &:last-child{
                     border-bottom: 0;
                 }
                .date-list{
                    width: 50%;
                    border-right: 1px solid #dedede;
                    &:last-child{
                        border-right: 0;
                    }
                }
            }
        }
        .total-wrap{
            width: 80%;
             border: 1px solid #dedede;
            .total-item{
                &:first-child{
                    border-bottom: 1px solid #dedede;
                    background-color: #f5f5f5;
                    .total-list{
                        height: 40px;
                        line-height: 40px;
                    }
                }
                .total-list{
                    flex: 1;
                    -webkit-flex: 1;
                    height: 60px;
                    text-align: center;
                    line-height: 60px;
                    border-right: 1px solid #dedede;
                    &:last-child{
                        border-right: 0;
                    }
                    .el-input{
                        width: 80%;
                    }
                }
            }
        }
    }
    
    .avatar-uploader {
            border-radius: 6px;
            box-sizing: border-box;
            vertical-align: top;
            .el-upload {
                cursor: pointer;
                position: relative;
                overflow: hidden;
                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                    border: 1px dashed #d9d9d9 !important;
                    border-radius: 6px;
                    margin-left: 6px;
                }
                .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
            .el-upload:hover {
                border-color: #20a0ff;
            }        
        }   
</style>